<template>
  <div class="main">
    <header-view :active-index="3"/>
    <div class="timeline">
      <el-timeline reverse>
        <el-timeline-item v-for="(item,index) in timelineList" :key="index"
                          :timestamp="item.year + ' 共 ' + item.count + ' 条'" placement="top">
          <el-card style="margin: 5px" v-for="article in item.articleList" :key="article.articleId">
            <div slot="header">
              <h3 class="title"><a :href="`article/detail?articleId=${article.articleId}`" v-text="article.title"></a>
              </h3>
            </div>
            <p><b>{{ article.author }}</b> 发表于 <b>{{ article.applyTime }}</b></p>
          </el-card>
          <div v-if="item.articleList.length < item.count" style="display: flex;justify-content: right;">
            <el-link type="warning" @click="getArticleByYear(item.year,1)">加载更多...</el-link>
          </div>
          <div v-if="item.articleList.length === item.count && item.count > 3">
            <el-link type="warning" @click="getArticleByYear(item.year,2)">收起</el-link>
          </div>
        </el-timeline-item>
      </el-timeline>
    </div>
    <footer-view/>
  </div>
</template>

<script>
import HeaderView from '@/components/HeaderView.vue'
import FooterView from '@/components/FooterView.vue'

export default {
  name: 'TimelineView',
  components: {
    HeaderView,
    FooterView
  },
  data () {
    return {
      timelineList: []
    }
  },
  methods: {
    getTimeline () {
      this.$http.get('api/timeline').then(data => {
        this.timelineList = data.data
      })
    },
    getArticleByYear (year, type) {
      if (type === 1) {
        this.$http.get(`api/timeline/${year}`).then(data => {
          for (const item of this.timelineList) {
            if (item.year === year) {
              item.articleList = data.data
            }
          }
        })
      } else {
        for (const item of this.timelineList) {
          if (item.year === year) {
            item.articleList.splice(3)
          }
        }
      }
    }
  },
  created () {
    this.getTimeline()
  }
}
</script>

<style scoped lang="scss">
.timeline {
  padding-top: 90px;
  width: 780px;
  margin: 0 auto;
  min-height: calc(100vh - 170px);

  .title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

a {
  text-decoration: none;
  color: black;
}

a:hover {
  color: cornflowerblue;
}
</style>
